<template>
	<view class="content">
		<view class="searchContent">
			<view class="search">花小小新疆炒米粉 满20减12</view>
		</view>
		<scroll-view scroll-y="true" class="contentContainer">
			<!-- 首页导航菜单 -->
			<view class="typeNav">
				<!-- 导航菜单 -->
				<view class="typeNavItem" v-for="typeNavItem in typeNavList" :key="typeNav.id">
					<image :src="typeNavItem.imgUrl"></image>
					<text>{{typeNavItem.value}}</text>
				</view>
			</view>
			<!-- 轮播图 -->
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff" :autoplay="false"
				:interval="3000">
				<swiper-item>
					<image src="../../static/swiper/01.png" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/swiper/02.png" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- 推荐 -->
			<view class="recommend">
				<text class="like">猜你喜欢</text>
				<!-- 条件列表 -->
				<view class="condition">
					<text>吃货联盟</text>
					<text>30分钟达</text>
					<text>无门槛红包</text>
					<text>满减优惠</text>
				</view>
				<!-- 店铺列表 -->
				<view class="storeList">
					<view class="storeListItem" v-for="shopItem in shopList" :key="shopItem.id">
						<!-- 商品图片 -->
						<image :src="'http://elm.cangdu.org/img/'+shopItem.image_path" mode=""></image>
						<view class="right">
							<text class="name">{{shopItem.name}}</text>
							<view class="detail1">
								<text>
									<text class="score">{{shopItem.rating === 5 ? '5.0' : shopItem.rating}}分</text>
									<text>月售 {{shopItem.recent_order_num}}</text>
								</text>
								<text class="timeAndDistance">{{shopItem.order_lead_time}} {{shopItem.distance}}</text>
							</view>
							<text class="orange">{{'"'+shopItem.description.slice(0,6)+'"'}}</text>
							<text class="blue" v-if="shopItem.delivery_mode.text==='蜂鸟专送'">蓝骑士专送</text>
							<view class="detail2">
								<text>起送￥{{shopItem.float_delivery_fee}}</text>
								<text>{{shopItem.piecewise_agent_fee.tips}}</text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				typeNavList: [],
				shopList: []
			}
		},
		methods: {
			// 获取分类列表
			async getTypeNavList() {
				const result = await request('/v2/index_entry')
				this.typeNavList = result.map(element => {
					return {
						id: element.id,
						value: element.title,
						imgUrl: 'http://fuss10.elemecdn.com' + element.image_url
					}
				}).slice(0, 15)
			},

			// 获取商铺列表
			async getShopList() {
				const result = await request('/shopping/restaurants?latitude=31.22967&longitude=121.4762')
				this.shopList = result.slice(8)
			}
		},

		mounted() {
			this.getTypeNavList()
			this.getShopList()
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #06B0F7;

		.searchContent {

			padding-bottom: 20upx;

			.search {
				width: 80%;
				height: 70upx;
				margin: 0 auto;
				padding-left: 80upx;
				line-height: 70upx;
				color: #aaa;
				border-radius: 40upx;
				background: #fff url(../../static/search.jpg) no-repeat 20upx center;
				background-size: 50upx;
			}
		}

		.contentContainer {
			height: calc(100vh - 90upx);
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			background: #fff;

			.typeNav {
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
				padding: 40upx 10upx;
				padding-bottom: 0;

				.typeNavItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					margin-bottom: 30upx;
					width: 20%;

					image {
						width: 80upx;
						height: 80upx;
					}

					text {
						margin-top: 10upx;
						font-size: 28upx;
						color: #666;
					}
				}
			}

			.swiper {
				width: 95%;
				height: 200upx;
				margin-left: 5%;

				swiper-item {
					box-sizing: border-box;
					// width: 95% !important;
					padding-right: 5%;

					// padding-right: 20upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 30upx;
					}
				}
			}

			.recommend {
				padding: 20upx 5%;

				.like {
					font-size: 36upx;
				}

				.condition {
					display: flex;
					justify-content: space-between;
					margin: 20upx 0;

					text {
						width: 23%;
						height: 60upx;
						border-radius: 15upx;
						text-align: center;
						line-height: 60upx;
						font-size: 26upx;
						background: #ddd;
					}
				}

				.storeList {
					.storeListItem {
						display: flex;
						height: 200upx;
						padding-top: 30upx;
						padding-bottom: 40upx;
						border-bottom: 2px solid #F8F8F8;
						// background-color: pink;

						image {
							width: 200upx;
							height: 190upx;
							border-radius: 20upx;
							margin-left: 5upx;
						}

						.right {
							// width: 400upx;
							flex: 1;
							margin-left: 20upx;
							font-size: 28upx;
							color: #666666;

							.name {
								font-size: 32upx;
								font-weight: 700;
								color: #000;
							}

							.detail1 {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin: 10upx 0;


								.score {
									color: #FF6300;
									padding-right: 20upx;
								}

								.timeAndDistance {
									width: 230upx;
									font-size: 24upx;
									
									overflow: hidden;
									text-align: right;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}

							.orange {
								float: left;
								padding: 10upx;
								border-radius: 10upx;
								color: #F77625;
								background-color: #FFEEE1;
							}

							.blue {
								float: right;
								padding: 5upx;
								border-radius: 10upx;
								color: #02B6FD;
								background: #E6F8FF;

							}

							.detail2 {
								clear: both;
								padding-top: 15upx;

								text {
									padding-right: 20upx;

								}
							}

						}
					}
				}
			}
		}

	}
</style>
